<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<style>
    #ajax_res{
        width: 600px;
        height: 300px;
        border: black 1px;
        font-size: 45px;
    }
</style>
<body>
    <div id="ajax_div">
        <input id="get_btn" type="button" value="receive ajax get"/>
        <br>
        <div id="get_res">nothing happened for get ...</div>
        <hr>
        <input id="post_btn" type="button" value="receive ajax post"/>
        <br>
        <div id="post_res">nothing happened for post ...</div>
    </div>
</body>
<script lang="text/javascript">
    const base_url = "http://localhost:8090/ajax";
    // TODO get DOM elements
    var get_btn = document.getElementById("get_btn");
    var post_btn = document.getElementById("post_btn")
    var get_res = document.getElementById("get_res");
    var post_res = document.getElementById("post_res")
    // TODO bind function to get button
    get_btn.addEventListener("click",function(){
        xhr = new XMLHttpRequest();
        xhr.open("get", base_url+"/ajax");
        xhr.withCredentials = true;
        xhr.send();
        xhr.onreadystatechange = () =>{
            if(xhr.readyState ===4 && xhr.status === 200){
                get_res.innerHTML = xhr.responseText;
            }
        }
    });
    // TODO bind function to post button
    post_btn.addEventListener("click",function(){
        xhr = new XMLHttpRequest();
        xhr.open("post", base_url+"/ajax");
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.withCredentials = true;
        xhr.send("name=Tom&age=30");
        xhr.onreadystatechange = () =>{
            if(xhr.readyState ===4 && xhr.status === 200){
                post_res.innerHTML = xhr.responseText;
            }
        }
    });

</script>
</html>